<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>detail</title>
    <link rel="stylesheet" type="text/css" href="../css/font/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../css/page/sort.css" />
    <style>
      
    </style>
</head>

<body>
    <div class="page" @vue:mounted="mounted">
        <!-- dq_topback,title=商品详情 -->
        <div class="nav-bar">
            <div onclick="core.back()" class="nav-bar-back">
                <span class="icon iconfont icon-fanhui m_r_10"></span>
                <span class="nav-bar-back-text">返回</span>
            </div>
            <span class="nav-bar-title">商品详情</span>
        </div>
        <!-- /dq -->
        <div class="scroll-view-y">
            <!-- 轮播图 -->
            <div class="swiper mySwiper">
                <div class="swiper-wrapper ">
                    <div class="swiper-slide" v-for="item of data.scrollImgs"><img :src="item"
                            class="-my-swiper-img" /></div>
                </div>
                <div class="swiper-pagination"></div>
            </div>

         
            <!-- 商品信息 -->
            <div class="goods_box">
                <div class="goods_top">
                    <span class="goods_spr">¥</span><span class="goods_pr ">{{data.pro.price}}</span>
                    <span class="goods_mpr">￥1299</span>
                    <div class="flex1"></div>
                    <div class="hot-box">
                        <span class="icon iconmini1 iconfont icon-shequhuodong"></span>
                        <span class="hot-num">39.00w</span>
                    </div>
                </div>
                <span class="goods_tit ">{{data.pro.title}}</span>
                <span class="goods_exp">快递：免费</span>
            </div>
            <!-- 规格 -->
            <div class="detail-size">
                <div class="goods_spec_box">
                    <span class="goods_spec_desc">规格</span>
                    <span class="goods_spec_text ">{{data.pro.guige}}</span>
                    <div class="flex1"></div>
                    <span class="icon iconfont icon-jinru"></span>
                </div>
            </div>
            <!-- 商品详情 -->
            <div class="detail-good">
                <div class="goods_details_box">
                    <div class="goods_detail_desc">
                        <div class="left_line"></div>
                        <span class="left_zi color_1">商品详情</span>
                    </div>
                  
                    <div class="content-info">
                
                            <img :src="item"  class="pro-img" v-for="item of data.contentImg" /></div>
                  

                </div>
            </div>
        </div>
        <div class="floor_box_page">
            <div class="floor_box">
                <div class="floor_btn" @click="onshare()">
                    <span class="icon  iconbig1 iconfont icon-fenxiang1"></span>
                    <span class="floor_zi">分享</span>
                </div>
                <div class="floor_btn" @click="oncart()" obj-login="1">
                    <span style="font-size:21px " class="icon  iconbig1 iconfont icon-cart"></span>
                    <span class="floor_zi">购物车</span>
                </div>
                <span class="floor_btn_4 btn_orange" @click="onaddcart()">加入购物车</span>
                <span class="floor_btn_4 btn_red" @click="onaddcart()">立即购买</span>
            </div>
            <safe-area></safe-area>
        </div>
    </div>
</body>

<script src="../script/api.js"></script>
<script src="../script/swiper-bundle.min.js"></script>
<script src="../script/common.js"></script>


<script type="module">
    import { createApp } from 'https://le.6gcc.com/app/web/script/pvue.js'
    const APP = () => {
        createApp({
            data: {
                pro: {},
                scrollImgs:[],
                contentImg:[]

            },
            getDetailImg(id){
                let unique = (new Date()).getTime();
                return `http://le.6gcc.com:8069/web/image?model=pros&id=${id}&field=img&unique=${unique}`
            },
            async getPro() {
                let id = core.getParam("id");
                
                let res = await core.pro.getPro(id);
                res.data.goodsCarouselPictures = [this.getDetailImg(id)];
                this.data.pro = res.data;
                const {img,img2,img3,imgc,imgc2,imgc3} = res.data;

                img && this.data.scrollImgs.push(img);
                img2 && this.data.scrollImgs.push(img2);
                img3 && this.data.scrollImgs.push(img3);
                core.log('res+++++++++++++');
                core.log(res);

                imgc && this.data.contentImg.push(imgc);
                imgc2 && this.data.contentImg.push(imgc2);
                imgc3 && this.data.contentImg.push(imgc3);
        
            }, 
            onaddcart() {
                var cart = $api.getStorage('car');
                if (cart == null || cart == undefined || cart == "") cart = [];

                this.data.pro['buynum'] = 1;
                this.data.pro['checked'] = true;
                var cartpos = this.getProInCart(cart, this.data.pro);

                if (cartpos > -1) {

                    if (cart[cartpos].buynum == undefined) cart[cartpos].buynum = 1;
                    cart[cartpos].buynum = cart[cartpos].buynum + 1;
                    cart[cartpos].checked = true;
                } else {
                    cart.push(this.data.pro);
                }

                $api.setStorage('car', cart);
                api.execScript({
                    frameName: 'page3',
                    name: 'homepage',
                    script: 'initcart();'
                });

                api.openWin({
                    name: 'shopping_cart',
                    url: './shopping_cart.html',
                    pageParam: {
                        param: '1'
                    }
                })
            },
            getProInCart(cart, pro) {
                for (var i = 0; i < cart.length; i++) {
                    if (pro.id == cart[i].id) {
                        return i;
                    }
                }
                return -1;
            }, onbuy() {
                api.openWin({
                    name: 'place_order',
                    url: './place_order.html'
                })
            }, oncart() {
                api.openWin({
                    name: 'shopping_cart',
                    url: './shopping_cart.html',
                    pageParam: {
                        param: '1'
                    }
                })
            }, onshare() {
                api.openWin({
                    name: 'other',
                    url: './other.html?action=other&id=' + this.data.pro.id,
                    pageParam: {
                        param: '1'
                    }
                })
            },
            mounted() {
                this.getPro();
            }
        }).mount()
    }

    window.apiready = () => {
        $api.fixStatusBar($api.dom('.nav-bar'));
        APP();
    }
</script>

<script>


    var swiper = new Swiper(".mySwiper", {
        autoplay: true,
        pagination: {
            el: ".swiper-pagination",
            type: "fraction",
        },
    });


</script>

</html>